<template>
  <div>
      <van-nav-bar title="分类">
  <template #right>
    <van-icon name="search" size="18" />
  </template>
</van-nav-bar>

<van-sidebar v-model="activeKey">
  <van-sidebar-item @click="change(item.id)" v-for="(item,index) in menus" :key="index" :title="item.catename" />
  <div class="page">
    <div class="son" @click="push(item.pid)" v-for="(item,index) in list" :key="index">
      <div class="yi">
      <img :src="$host+item.img" alt="">
      {{item.catename}}
         </div>
    </div>
  </div>
</van-sidebar>

  </div>
</template>

<script>
import {getlist,getlei} from "../radio/index"
export default {
  created(){
    this.fid=1
    this.getcelan()
    this.lop()
    
  },
data(){
  return{
    activeKey: 0,
    menus:[],
    fid:"",
    list:[]
  }
},
methods:{
  async getcelan(){
    let res=await getlist()
    this.menus=res.list
    this.menus.forEach(item=>{
    
      if(item.id==this.fid){
        this.list=item.children
      }
    })
  },
  push(pid){
  this.$router.push("/index/go/"+pid)
  },
  change(fid){
  this.fid=fid
  console.log(this.menus);
    console.log(this.fid);
    this.menus.forEach(item=>{
    
      if(item.id==this.fid){
        this.list=item.children
      }
    })
    console.log(this.list);
  },
  lop(){
    
  }
}
}
</script>

<style>
.page{
  width: 290px;
  height: 500px;
  position: absolute;
  right: 0;
  top: 46px;
  background: #fafafa;
  display: flex;
  /* justify-content: space-around; */
}
.son{
  width: 85px;
  height: 160px;
  background: #fff;

  margin-top: 5px;
  margin-left: 7px;
  
} 
.yi img{
  width: 50px;
}
.yi{
  width: 50px;
  margin: 43px auto;
}
</style>